import React, { useEffect, useState } from 'react'
import { List, Avatar } from 'antd'

function Index() {
  const [dataList, setDataList] = useState([])
  useEffect(() => {

    fetch("http://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json()).then((res) => {
        setDataList(res)
        console.log(res);
      })
  }, [])

  return (
    <div style={{ overflowY: 'auto' }}>
      <List
        itemLayout="horizontal"
        dataSource={dataList.filter(item => item.id < 10)}
        renderItem={item => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
              title={item.title}
              description={item.body}
            />
          </List.Item>
        )}
      />
    </div>
  )
}
export default Index
